<template>
  <div class="radio">
    <!-- 电台分类 -->
    <div class="category">
      <ul>
        <li v-for="(item,index) in categorey"
            :key="index"
            @click="changeClick(index)"
            :class="{bcolor:currentIndex==index}">
          <img :src="item.pic84x84IdUrl"
               alt="">
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <scroll class="radio-scroll">
      <!-- 电台榜 -->
      <div v-if="currentIndex==-1">
        <radio-rank :Hotradiolist='Hotradiolist'
                    :Newradiolist='Newradiolist' />
        <p class="title">{{recomname}}</p>
        <radio-item :radioitem='radioitem' />
      </div>
      <div v-else>
        <categorey :index='currentIndex'
                   :categorey='categorey'
                   :catelist='catelist'
                   :catehotlist='catehotlist' />
      </div>
    </scroll>
  </div>
</template>

<script>
import { _getHotradio, _getTypeinfo, _getNewradio, _getRadioType, _getTypeHotInfo, _getTodayradio } from 'network/radio'
import Scroll from 'components/common/scroll/Scroll.vue'
import RadioRank from './childComps/RadioRank.vue'
import RadioItem from './childComps/RadioItem.vue'
import Categorey from './childComps/Categorey.vue'
export default {
  components: { Scroll, RadioRank, RadioItem, Categorey },
  name: 'AllRadio',
  data () {
    return {
      limit: 10,
      Hotradiolist: [],
      Newradiolist: [],
      // 推荐电台
      radioitem: [],
      recomname: '',
      // 分类电台
      categorey: [],
      currentIndex: -1,
      // 分类电台的优秀电台
      catelist: [],
      catehotlist: []
    }
  },
  created () {
    _getHotradio(this.limit).then(res => {
      this.Hotradiolist = res.data.toplist
    })
    _getNewradio(this.limit).then(res => {
      this.Newradiolist = res.data.toplist;
    })
    _getRadioType().then(res => {
      this.categorey = res.data.categories.slice(0, 12);
    })
    // 推荐
    _getTodayradio().then(res => {
      this.recomname = res.data.name;
      this.radioitem = res.data.djRadios.slice(0, 4);
    })
  },
  methods: {
    changeClick (index) {
      this.currentIndex = index;
      this.getCateinfo(index);
    },
    getCateinfo (index) {
      // 获取分类电台的优秀电台
      _getTypeinfo(this.categorey[index].id).then(res => {
        this.catelist = res.data.djRadios.slice(0, 5);
      })
      _getTypeHotInfo(this.categorey[index].id, this.limit).then(res => {
        this.catehotlist = res.data.djRadios;
      })
    }
  }
}
</script>

<style scoped>
.radio {
  width: 100%;
  height: 100%;
  padding: 0 35px;
  box-sizing: border-box;
  overflow: hidden;
  color: #333;
}
.radio .title {
  width: 100%;
  height: 40px;
  font-size: 25px;
  margin-top: 20px;
  border-bottom: 2px solid #00aa85;
}
.radio-scroll {
  height: calc(100% - 150px);
  overflow: hidden;
}
.category {
  width: 100%;
  height: 150px;
  background: #fff;
}
.category ul {
  list-style: none;
  margin-left: 10px;
  text-align: center;
}
ul li {
  float: left;
  width: 70px;
  margin: 50px 10px 0 10px;
  height: 70px;
}
ul li:hover {
  background: #f7f7f7;
}
ul li img {
  width: 40px;
  height: 40px;
  margin: 0px 15px;
}
.bcolor {
  border: 2px solid rgb(212, 1, 1);
}
</style>
